<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <title>净值估算</title>
  <link rel="stylesheet" href="../css/fund.css" />
  <style>
    canvas {
      height: 46.4vw;
    }

    span.icon {
      background-image: url(https://gw.alipayobjects.com/zos/rmsportal/whibVgSIRTiyaWvdSxqq.png);
      width: 3.4667vw;
      height: 3.4667vw;
      display: inline-block;
      background-size: cover;
      vertical-align: middle;
      margin-top: -2px;
      margin-left: 2px;
    }
    .custom-tooltip-wrapper {
      visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 8vw;
      line-height: 8vw;
      vertical-align: middle;
      padding-left: 4vw;
      padding-right: 4vw;
      background: #E9F1FF;
      z-index: 10;
      transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1);
      font-size: 3.2vw;
    }
    .custom-tooltip-title {
      color: #2e2e2e;
      float: left;
    }
    .custom-tooltip-content {
      float: right;
      color: #808080;
    }
    .guide-point-1 {
      width: 2.667vw;
      height: 2.667vw;
      border-radius: 100%;
      box-sizing: border-box;
      opacity: .3;
      animation: animate 2.5s 0s ease-out infinite;
    }
    .guide-point-2 {
      width: 1.6vw;
      height: 1.6vw;
      border-radius: 100%;
      box-sizing: border-box;
      border: 1px solid #ffffff;
    }

    @keyframes animate {
      0% {
        opacity: 0.2;
      }
      20% {
        opacity: 0.1;
      }
      40% {
        opacity: 0;
      }
      60% {
        opacity: .1;
      }
      80% {
        opacity: .2;
      }
      100% {
        opacity: .3;
      }
    }
  </style>
  <script src="../js/f2-all.min.js"></script>
  <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
</head>

<body>
  <div class="chart-card">
    <div class="chart-wrapper">
      <div class="custom-tooltip-wrapper">
        <div class="custom-tooltip-title" id="tooltipTitle"></div>
        <div class="custom-tooltip-content">
          <span>估算涨幅:</span>
          <span class="item-value" id="tooltipValue">--</span>
        </div>
      </div>
      <div class="chart-legend" id="chartLegend" style="padding-left: 4.2667vw;padding-right: 4.2667vw;">
        <div class="item">
          <span class="item-value" data-type="time">--</span>
        </div>
        <div class="item">
          <span>实时估值</span><span class="icon"></span>:
          <span class="item-value" data-type="value">--</span>
        </div>
        <div class="item" style="padding-right: 0;padding-left: 8px;">
          <span>估算涨幅:</span>
          <span class="item-value" data-type="percent">--</span>
        </div>
      </div>
      <!-- 图表主题 -->
      <canvas id="mountNode"></canvas>
    </div>
    <div class="chart-card-footer">
      <div style="text-align: center;color: rgba(0, 0, 0, .45);font-size: 3.2vw;">
        估值收益仅供参考，实际涨跌幅以基金净值为准
      </div>
    </div>
  </div>
  <script>
    var DWJZ = 1.614; // 开盘价
    var TODAY = moment().format('YYYY-MM-DD');
    // 以分钟为单位，显示 9:30 到 15:00 的实时净值估值，其中 11:30 ~ 13:00 属于午间停盘，故完整情况下会有 242 条数据
    var MIN = 1;
    var MAX = 242;
    var MEDIAN = parseInt((MIN + MAX) / 2);
    var tickMap = {}; // 坐标轴文本
    tickMap[MIN] = '09:30';
    tickMap[MEDIAN] = '11:30/13:00';
    tickMap[MAX] = '15:00';

    function updateLegend(currentInfo) {
      // 填充自定义图例内容
      $('#chartLegend .item-value').each(function(index, ele) {
        var type = $(ele).data('type');
        if (type === 'time') {
          $(ele).text(TODAY + ' ' + currentInfo.time);
        } else if (type === 'value') {
          var value = DWJZ * (1 + (currentInfo.value / 100));
          $(ele).text(value.toFixed(4));
        } else if (type === 'percent') {
          var color;
          var text;
          if (currentInfo.value < 0) {
            color = '#53BC20';
            text = currentInfo.value.toFixed(2) + '%';
          } else if (currentInfo.value > 0) {
            color = '#F5222D';
            text = '+' + currentInfo.value.toFixed(2) + '%';
          } else {
            text = currentInfo.value.toFixed(2) + '%';
          }
          $(ele).css({
            color: color
          });
          $(ele).text(text);
        }
      });
    }
    function updateGuide(chart, currentInfo, color) {
      chart.guide().clear();
      chart.guide()
        .html({
          position: [ currentInfo.index, currentInfo.value ],
          html: '<div class="guide-point-1" style="background-color:' + color + ';"></div>'
        });
      chart.guide().html({
          position: [ currentInfo.index, currentInfo.value ],
          html: '<div class="guide-point-2" style="background-color:' + color + ';"></div>'
        });
    }

    var currentIndex = 150; // 模拟实时数据
    $.getJSON('./data/valuation.json', function(data) {
      var currentData = data.slice(0, currentIndex);
      var currentObj = currentData[currentData.length - 1]; // 最新净值数据
      var color;
      if (currentObj.value >= 0) {
        color = '#F5222D';
      } else {
        color = '#52C41A';
      }

      var chart = new F2.Chart({
        id: 'mountNode',
        pixelRatio: window.devicePixelRatio,
        padding: [ 14, 'auto', 'auto' ]
      });
      chart.source(currentData, {
        index: {
          min: MIN,
          max: MAX,
          nice: false,
          ticks: [ MIN, MEDIAN, MAX ]
        },
        value: {
          tickCount: 5
        }
      });
      chart.tooltip({
        crosshairsStyle: {
          stroke: '#CAD7EF'
        },
        custom: true,
        onChange: function(obj) {
          var items = obj.items;
          var title = TODAY + ' ' + items[0].origin.time;
          var value = items[0].origin.value;

          $('#tooltipTitle').text(title);

          var color;
          if (value > 0) {
            value = '+' + value.toFixed(2) + '%';
            color = '#F5222D';
          } else if (value < 0) {
            value = value.toFixed(2) + '%';
            color = '#53BC20';
          } else {
            value = value.toFixed(2) + '%';
          }
          $('#tooltipValue').text(value);
          $('#tooltipValue').css({
            color: color
          });
          $('.custom-tooltip-wrapper').css('visibility', 'visible');
        },
        onHide: function() {
          $('.custom-tooltip-wrapper').css('visibility', 'hidden');
        }
      });
      chart.axis('index', {
        label: function(text, index, total) {
          var cfg = {};
          cfg.text = tickMap[text];

          if (index === 0) {
            cfg.textAlign = 'start';
          } else if (index === (total - 1)) {
            cfg.textAlign = 'end';
          }
          return cfg;
        }
      });
      chart.axis('value', {
        label: function(text) {
          text = text * 1;
          var cfg = {
            text: text.toFixed(2) + '%'
          };
          if (text > 0) {
            cfg.text = '+' + cfg.text;
          } else if (text === 0) {
            cfg.fill = '#000';
            cfg.fontWeight = 'bold';
          }
          return cfg;
        },
        grid: function(text, index) {
          if (text == 0) {
            return {
              lineDash: null
            };
          }
        }
      });
      // 在最新点绘制呼吸灯
      updateGuide(chart, currentObj, color);
      var lineGeom = chart.line({
        sortable: false // 数据已在外部排序，提升性能
      }).position('index*value').color(color);
      chart.render();
      updateLegend(currentObj); // 显示最新时刻的涨幅情况

      // 更新数据，实际情况是一分钟更新一次，这里为了效果改成 3s
      var interval = setInterval(function() {
        if (currentIndex === MAX - 1) {
          clearInterval(interval);
          return;
        }
        currentIndex++;
        var newData = data.slice(0, currentIndex);
        var lastObj = newData[currentIndex - 1];
        var currentColor;

        if (lastObj.value >= 0) {
          currentColor = '#F5222D';
        } else if (lastObj.value < 0) {
          currentColor = '#52C41A';
        }
        $('.custom-tooltip-wrapper').css('visibility', 'hidden');

        // 更新曲线的颜色
        lineGeom.color(currentColor).animate(false);
        // 更新呼吸灯
        updateGuide(chart, lastObj, currentColor);
        // 更新图例区内容
        updateLegend(lastObj);
        // 更新数据
        chart.changeData(newData);
      }, 1000);
    });
  </script>
</body>

</html>
